<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- el-card:带了box-shadow效果的<div></div> -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tool :item="company" @add-dept="handleShowAddDeptDialog" />
        <!-- 组织架构tree组件 -->
        <el-tree :data="treeData" :props="{ label: 'name' }" default-expand-all>
          <!-- 作用域插槽获取的每行部门对象  让组件的结构支持自定义 -->
          <!-- data就是每行的部门对象 -->
          <template #default="{ data }">
            <!-- 部门信息 -->
            <!-- 使用组件 -->
            <tree-tool
              :item="data"
              @del-dept="handleDelDept"
              @add-dept="handleShowAddDeptDialog"
              @edit-dept="handleEditShowDialog"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 使用add组件 -->
      <!-- <add-dept
        :isShow="isShow"
        @close="isShow = false"
        :deptList="deptList"
        :item="deptObj"
      /> -->
      <!-- 用.sync修饰符 -->
      <!-- 添加部门组建 -->
      <add-dept
        :isShow.sync="isShow"
        :deptList="deptList"
        :item="deptObj"
        @shuXin="xuanRan()"
      />
      <!-- 编辑部门组建 -->
      <edit-dept
        :isShow.sync="isShow2"
        :deptList="deptList"
        :item="deptObj"
        @shuXin="xuanRan()"
      />
      <!-- === <add-dept :isShow="isShow" @update:isShow="isShow = false" />
      sync修饰符总结：
      1、.sync修饰符只是语法糖
      2、以这个代码为例：<jsck：title.sync=“myTitle”></jack>
      等同于<jack
                 :title="myTitle"
                 @update:title="把组件传递来的新值付给myTitle数据" -->
      <!-- v-model指令也是个语法糖，本质是 ：value + @input -->
    </div>
  </div>
</template>

<script>
import { delDeptAPI, getDeptListAPI } from "@/api/departments";
import { list2Tree } from "@/utils/shift";
import TreeTool from "./components/tree-tool.vue";
import AddDept from "./components/add-dept.vue";
import EditDept from "./components/edit-dept.vue";
export default {
  components: { TreeTool, AddDept, EditDept },
  name: "DepartmentsView",
  data() {
    return {
      // 部门列表
      deptList: [],
      // 部门树形数据
      treeData: [],
      //公司信息
      company: {
        name: "",
        manager: "",
        id: "",
      },
      // 控制弹窗隐藏
      isShow: false,
      isShow2: false,
      //记录当前操作部门
      deptObj: {},
    };
  },
  created() {
    this.getDepList();
  },
  methods: {
    //获取部门列表
    async getDepList() {
      //掉接口发请求
      const { data } = await getDeptListAPI();
      // 解构
      // const resp = await getDeptListAPI()
      // const { data } = resp;
      this.company.name = data.companyName;
      this.company.manager = data.companyManager;
      this.company.id = data.companyId;
      //保存一份数据
      this.deptList = data.depts;
      //这里不能直接赋值   因为depts不符合树形结构
      this.treeData = list2Tree(data.depts, "");
      //保存一份数据
      this.loading = false;
    },
    //处理删除部门
    async handleDelDept(deptId) {
      try {
        //询问
        await this.$confirm("真的让他在这个世界消失吗？", "雇佣杀手", {
          type: "warning",
          cancelButtonText: "再让他多活一天",
          confirmButtonText: "做掉他",
        });
        //确定
        //发请求
        await delDeptAPI(deptId);
        //获取部门列表
        await this.getDepList();
        //给删除成功的提示
        this.$message.success("他已经死了");
      } catch (err) {
        //取消
      }
    },
    //添加部门
    async handleShowAddDeptDialog(deptObj) {
      this.isShow = true;
      this.deptObj = deptObj;
    },
    //显示添加/编辑部门的弹框
    handleShowDialog(deptObj) {
      this.isShow = true;
      //给正在操作部门对象赋值
      this.deptObj = deptObj;
    },
    xuanRan() {
      this.getDepList();
    },
    handleEditShowDialog(deptObj) {
      this.isShow2 = true;
      //给正在操作部门对象赋值
      this.deptObj = deptObj;
    },
  },
  comments: {
    TreeTool,
  },
};
</script>


<style lang='scss' scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>

